<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height:100px;
            border: 1px paleturquoise solid;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
         var divDom = document.querySelector('div');
        // 点击事件
        divDom.onclick = function(){
            console.log('div被点击');
        }
        // 鼠标的划入
        divDom.onmouseover  = function(){
            console.log('鼠标划入')
        }
        // 鼠标的移动事件
        divDom.onmousemove = function(){
            console.log('鼠标移动')
        }
        // 鼠标划出事件
        divDom.onmouseout = function(){
            console.log('鼠标离开')
        }

        //每次点击鼠标涉及两个动作 分别为按下与抬起
        divDom.onmousedown = function(){
            console.log('鼠标被按下')
        }
        divDom.onmouseup = function(){
            console.log('鼠标抬起')
        }
    </script>
</body>
</html>